let mescroll = null
//Zepto的工厂函数
Zepto(function($) {
  setRem()
  onresize = function() {
    setRem()
  }
  //下拉图片是设置
  let htmlContent = `<img class="downwarp-slogan" src="./img/mescroll-slogan.jpg"/>`
  htmlContent += `<p class="downwarp-progress"></p>`
  htmlContent += `<p class="downwarp-tip"></p>`
  //mescroll对象
  mescroll = new MeScroll('mescroll', {
    //下拉刷新的配置项
    down: {
      //处理下拉刷新的回调函数，不能写成downCallback()
      callback: downCallback,
      htmlContent
    },
    //上拉加载的配置项
    up: {
      //初始化mescroll对象时，就加载页面的第1页数据，默认时false
      auto: true,
      //上拉加载数据的函数 不能写成upCallback()
      callback: upCallback,
      //禁止ios的回弹
      isBounce: false,
      //页面的配置信息
      page: {
        //当前页码，每次上拉，会自动执行num++
        num: 0,
        //每页显示数据的条数
        size: 10
      },
      //页面没有数据时的提示信息
      htmlNodata: `<p class="upwarp-nodata">--END--</p>`,
      //回到顶部的按钮
      toTop: {
        //返回顶端图片的资源
        src: './img/mescroll-totop.png',
        //当滚动的距离超过1000px时，才出现回到顶部的按钮
        offset: 1000
      },
      //图片懒加载
      lazyLoad: {
        //是否使用懒加载
        use: true,
        //真实图片的地址属性(加载后会自动移除此属性)，支持网络图片 <img imgsrc='真图地址' src='占位图地址' />
        attr: 'imgsrc',
        //图片加载成功时显示的动画
        showClass: 'mescroll-lazy-in',
        //页面滚动时，测试当前的元素是否在显示区域，间隔检测时间，如果在显示区域就加载图片
        delay: 500,
        //触发懒加载的距离200px
        offset: 200
      }
    }
  })
})

//下拉刷新的回调函数
function downCallback() {
  //下拉刷新，实际是加载第1页的数据
  getListDataFromNet(
    1,
    10,
    //请求成功的回调函数
    function successCallback(message) {
      //获得数据后要解析数据,获得商品数组
      let curPageData = message.goods
      //获得商品的总数
      let totalSize = message.total
      //在页面渲染数据,true表示是下拉刷新操作
      setListData(curPageData, true)
      //停止加载中的效果
      mescroll.endBySize(curPageData.length, totalSize)
    },
    //请求失败的回调函数
    function errorCallback() {
      //隐藏上拉刷新下拉加载的状态
      mescroll.endErr()
    })
}

//上拉加载数据的回调函数
function upCallback(page) {
  //网路请求数据函数，传递页码、一页几条、执行成功的回调函数、执行失败的回调函数
  getListDataFromNet(
    //页码
    page.num,
    //显示几条数据
    page.size,
    //请求成功的回调函数
    function successCallback(message) {
      //获得数据后要解析数据,获得商品数组
      let curPageData = message.goods
      //获得商品的总数
      let totalSize = message.total
      //在页面渲染数据,false表示不是下拉操作
      setListData(curPageData, false)
      //停止加载中的效果
      mescroll.endBySize(curPageData.length, totalSize)
    },
    //请求失败的回调函数
    function errorCallback() {
      //隐藏上拉刷新下拉加载的状态
      mescroll.endErr()
    })
}

/**
 * 网路请求列表数据的方法
 * @param pagenum
 * @param pagesize
 * @param successCallback
 * @param errorCallback
 */
function getListDataFromNet(pagenum, pagesize, successCallback, errorCallback) {
  setTimeout(function() {
    //任何的ajax都有成功和失败清况，当请求失败抛异常，如何对异常处理？
    try {
      let message = ajaxRequest(pagenum, pagesize)
      console.log(message)
      //请求成功，调用successCallback
      successCallback && successCallback(message)
    } catch (e) {
      //请求失败，调用errorCallback
      errorCallback && errorCallback()
    }
  }, 1000)
}

/**
 * ajax请求数据的方法
 * @param pagenum
 * @param pagesize
 * @returns {null}
 */
function ajaxRequest(pagenum, pagesize) {
  let message = null
  //要调用ajax请求，同步请求
  $.ajaxSettings.async = false
  $.ajax({
    url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
    type: 'GET',
    data: { pagenum, pagesize },
    success(res) {
      message = res.message
    },
    error(err) {
      console.log(err)
    }
  })
  //设置ajax为异步
  $.ajaxSettings.async = false
  return message
}

/**
 * 渲染页面数据的函数
 * @param arr
 */
function setListData(arr, isDown) {
//找到页面的中class='goods-list'的元素
  let goodsList = $('.goods-list')
  if (isDown) {
    goodsList.empty()
  }
  //遍历数组把数据拼接到页面中
  arr.forEach(function(item, index) {
    //如果加载页面图片没有就使用一个图片代替
    if (item.goods_small_logo === '') {
      item.goods_small_logo = 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'
    }
    //要拼接的元素
    let goods =
      `<div class="goods">
          <!--左边的图片-->
          <div class="img-wrap">
            <img imgsrc="${item.goods_small_logo}" src="./img/no.jpg" alt="">
          </div>
          <!--右边的详情-->
          <div class="info-wrap">
            <div class="goods-name">${item.goods_name}</div>
            <div class="goods-price">￥${item.goods_price}</div>
          </div>
        </div> `
    //拼接数据goods到goodsList
    goodsList.append(goods)
  })
}
